<template>
	<div class="container">
		<SearchForm
			@reset="reset"
			@search="search"
			ref="search"
			labelWidth="100px">
			<el-form-item label="业务单号:">
				<el-input
					clearable
					v-model="queryParams.orderCode"
					placeholder="请输入业务单号"></el-input>
			</el-form-item>
			<el-form-item label="客户名称:">
				<el-input
					clearable
					v-model="queryParams.earnCustomerName"
					placeholder="请输入业务单号"></el-input>
			</el-form-item>
			<el-form-item label="开票状态:" prop="invoiceStatus">
				<el-select
					filterable
					v-model="queryParams.invoiceStatus"
					clearable>
					<template v-for="dict in dict.type.settle_invoice_status">
						<el-option
							:label="dict.label"
							:value="dict.value"
							:key="dict.value"></el-option>
					</template>
				</el-select>
			</el-form-item>
			<el-form-item label="车辆运营公司:">
				<el-input
					clearable
					v-model="queryParams.carRunCompany"
					placeholder="请输入车辆运营公司"></el-input>
			</el-form-item>
		</SearchForm>

		<div class="card-wrap card-padding">
			<div class="table-title-wrap justify-end">
				<el-button
					type=""
					icon="el-icon-upload2"
					size="mini"
					@click="exportFile"
					v-hasPermi="['finance:manage:settle:list:export']">
					导出
				</el-button>
			</div>
			<div class="tableBox">
				<table-page
					:loading="loading"
					:dataList="dataList"
					:total="total"
					:page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize"
					:border="true"
					@setSizeCurrent="getList">
					<!-- 操作插槽 -->
					<template slot="tableColAc">
						<el-table-column
							label="操作"
							align="center"
							width="160px">
							<template slot-scope="scope">
								<div class="handle">
									<el-button
										size="mini"
										type="text"
										@click="
											toPage({
												path: '/finance/settleDetail',
												name: 'SettleDetail',
												query: {
													settleId:
														scope.row.settleId,
												},
											})
										"
										v-hasPermi="[
											'finance:manage:settle:list:look',
										]">
										查看
									</el-button>
									<el-button
										size="mini"
										type="text"
										v-hasPermi="[
											'finance:manage:settle:list:invoice',
										]"
										@click="showInvoice(scope.row)">
										{{
											1 == scope.row.invoiceStatus
												? '查看发票'
												: '开票'
										}}
									</el-button>
									<el-button
										v-if="scope.row.notifyState == 1"
										size="mini"
										type="text"
										v-hasPermi="[
											'finance:manage:settle:list:notify',
										]">
										通知
									</el-button>
								</div>
							</template>
						</el-table-column>
						<el-table-column
							label="结算单号"
							align="center"
							width="190">
							<template slot-scope="scope">
								{{ scope.row.settleCode }}
							</template>
						</el-table-column>
						<el-table-column
							label="通知方式"
							align="center"
							show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.notifyTypeStr }}
							</template>
						</el-table-column>
						<el-table-column
							label="通知时间"
							align="center"
							show-overflow-tooltip
							min-width="100px">
							<template slot-scope="scope">
								{{ scope.row.notifyDate | formatTime(0) }}
							</template>
						</el-table-column>
						<el-table-column
							label="通知状态"
							align="center"
							show-overflow-tooltip>
							<template slot-scope="scope">
								<span
									:class="[
										scope.row.notifyState == 0 ||
										scope.row.notifyState == 2
											? 'state_red'
											: '',
									]">
									{{ scope.row.notifyStateStr }}
								</span>
							</template>
						</el-table-column>
						<el-table-column
							label="开票状态"
							align="center"
							show-overflow-tooltip>
							<template slot-scope="scope">
								<dict-tag
									:options="dict.type.settle_invoice_status"
									:value="scope.row.invoiceStatus" />
							</template>
						</el-table-column>
						<el-table-column
							label="客户名称"
							align="center"
							show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.earnCustomerName }}
							</template>
						</el-table-column>
						<el-table-column
							label="车辆运营公司"
							align="center"
							min-width="160"
							show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.carRunCompany | filterNull }}
							</template>
						</el-table-column>
						<el-table-column
							label="业务单号"
							align="center"
							width="190">
							<template slot-scope="scope">
								<TooltipDiv
									:content="sliceStr(scope.row.orderCode)">
									<template #content>
										<div
											class="tooltipItem"
											v-for="item in getOrderCodeArr(
												scope.row.orderCode,
											)">
											{{ item }}
										</div>
									</template>
								</TooltipDiv>
							</template>
						</el-table-column>
						<el-table-column
							label="使用期间"
							align="center"
							min-width="180px">
							<template slot-scope="scope">
								{{ scope.row.startTime | formatTime(0) }} ~
								{{ scope.row.endTime | formatTime(0) }}
							</template>
						</el-table-column>
						<el-table-column label="使用日" align="center">
							<template slot-scope="scope">
								{{ scope.row.useDuration | getUseDuration }}
							</template>
						</el-table-column>
						<el-table-column label="项目" align="center">
							<template slot-scope="scope">
								{{ scope.row.settleAccountsTypeStr }}
							</template>
						</el-table-column>
						<el-table-column label="金额" align="center">
							<template slot-scope="scope">
								{{
									format_thousand(
										scope.row.settleAccountsAmount,
									)
								}}
							</template>
						</el-table-column>
					</template>
				</table-page>
			</div>
		</div>

		<InvoiceDialog ref="invoiceDialog" @success="getList"></InvoiceDialog>
	</div>
</template>

<script>
	import TooltipDiv from '@/components/A/A-form/tooltipDiv/index.vue';
	import * as apis from '@/api/finance/manage/settle/api.js';
	import InvoiceDialog from '@/views/finance/manage/settle/components/InvoiceDialog.vue';
	export default {
		name: 'Settle',
		components: { InvoiceDialog, TooltipDiv },
		dicts: ['settle_invoice_status'],
		data() {
			return {
				value: '',
				options: '',
				total: 0,
				loading: true,
				queryParams: {
					applyUserName: '',
					pageNum: 1,
					pageSize: 10,
				},
				dataList: [],
			};
		},

		mounted() {
			this.getList();
		},
		activated() {
			this.getList();
		},
		filters: {
			getUseDuration(data) {
				let word = '-';
				switch (data) {
					case '1':
						word = '一个月';
						break;
					default:
						break;
				}
				return word;
			},
		},
		methods: {
			sliceStr(str) {
				return str?.slice(1, -1);
			},
			getOrderCodeArr(str) {
				if (this.Empty(str)) return [];
				let arr = str?.slice(1, -1)?.split(',');
				if (this.Empty(arr)) return [];
				return arr;
			},
			showInvoice(row) {
				this.$refs.invoiceDialog.show(row);
			},
			exportFile() {
				let params = this._.cloneDeep(this.queryParams);
				this.download(
					apis.ExportFile,
					params,
					`应收结算_${new Date().getTime()}.xlsx`,
				);
			},
			toPage(route) {
				this.$router.push(route);
			},
			search() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
				};
				this.getList();
			},
			getList() {
				this.loading = true;
				apis?.List(this.queryParams)
					.then(res => {
						if (res.code == 200) {
							this.dataList = res.rows;
							this.total = res.total;
						}
					})
					.catch(() => {})
					.finally(() => {
						this.loading = false;
					});
			},
			viewDetail(data) {
				this.$router.push({
					path: '/finance/paymentDetail',
				});
			},
		},
	};
</script>

<style scoped lang="scss">
	.container {
		padding: 15px;
		box-sizing: border-box;
	}
	.searchForm {
		padding: 15px;
		display: grid;
		gap: 10px 15px;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		background-color: #fff;
		.item {
			display: flex;
			align-items: center;
			.label {
				width: 80px;
				font-size: 14px;
				margin-right: 15px;
				vertical-align: middle;
				color: #606266;
				font-weight: 700;
			}
			.content {
				flex: 1;
			}
		}
	}
	.tableBox {
		background-color: #fff;
		padding-bottom: 20px;
	}
	.searchbtns {
		padding: 20px 15px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}
	::v-deep .el-form-item {
		.el-form-item__label {
			white-space: nowrap;
		}
	}
	.handle {
		display: flex;
		justify-content: space-around;
		::v-deep .el-button + .el-button {
			margin: 0;
		}
	}

	.tooltipItem {
		line-height: 1.5em;
	}
</style>
